<template>
	<el-row>
		<el-col :span="24">
			<el-card shadow="never">
				<ul class="tags-lines">
					<li class="tags-line" v-for="(items, index) in cateList" :key="index">
						<div class="tags-title">{{ items.name }} :</div>
						<ul class="tags">
							<li
								:class="{ active: selectedTag === `全部${index}` }"
								@click="selectTag(items.name,`全部${index}`)">
								<a style="cursor: pointer;">全部</a>
							</li>
							<li v-for="(item, idx) in items.value" :key="idx"
									:class="{ active: selectedTag === item }"
									@click="selectTag(items.name,item)">
								<a style="cursor: pointer;">{{ item }}</a>
							</li>
						</ul>
						<el-divider v-if="cateList?.length !== 1 && cateList?.length !== index + 1"/>
					</li>
				</ul>
			</el-card>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
const props = defineProps(<any>{
	cateList: Array, // 接收分类列表
});
const emit = defineEmits(['tagSelected']); // 定义 tagSelected 事件
const selectedTag = ref('全部0');
const selectTag = (cateName:string,tag:string) => {
  console.log(cateName,tag)
	selectedTag.value = tag; // 更新选中的标签
	emit('tagSelected', {name:cateName,value:tag}); // 向父组件传递选中的标签
};
</script>
<style scoped>
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.tags-line {
	display: block;
	padding: 10px 0 !important;
}

.tags-title {
	height: 24px;
	line-height: 24px;
	float: left;
	color: #999;
	font-size: 14px;
}

.tags {
	margin-left: 40px !important;
}

li.active {
	background: #f34d41; /* 选中时背景红色 */
	color: #fff;         /* 选中时字体颜色 */
}

li {
	border-radius: 14px;
	padding: 3px 9px;
	display: inline-block;
	margin-left: 12px;
	cursor: pointer; /* 指针样式 */
}
</style>
